<template>
  <div class="container">
    <div style="">
      <div class="card_title">
        <img src="~@/assets/report/first/tiaokong.png" />
        <span>调控效果</span>
      </div>
      <div class="card_nd_title">
        <span>控制目标</span>
        <div class="line" style="width:64px;"></div>
      </div>
      <div class="card_content">
        <a-table bordered size="middle" :pagination="false" rowKey="id" :columns="listColumns" :dataSource="report">
          <template slot="trendValue" slot-scope="text, record">
            <template v-if="[1, 2, 3, 5, 6, 7, 8, 9].includes(record.typeId)">
              <span>{{ record.trendValue }}</span>
              <span v-if="record.trend == 1" style="color:red">↑</span>
              <div v-if="record.trend == 2" style="background: orange;width: 12px;height: 3px;"></div>
              <span v-if="record.trend == 3" style="color:green">↓</span>
            </template>
            <template v-else>
              <span v-if="record.thisPeriodValue">{{
                Number(record.thisPeriodValue) - Number(record.lastPeriodValue)
              }}</span>
              <template v-if="record.thisPeriodValue">
                <span v-if="Number(record.thisPeriodValue) - Number(record.lastPeriodValue) > 0" style="color:red"
                  >↑</span
                >
                <div
                  v-if="Number(record.thisPeriodValue) - Number(record.lastPeriodValue) == 0"
                  style="background: orange;width: 12px;height: 3px;"
                ></div>
                <span v-if="Number(record.thisPeriodValue) - Number(record.lastPeriodValue) < 0" style="color:green"
                  >↓</span
                >
              </template>
            </template>
          </template>
          <template slot="thisPeriodValue" slot-scope="text, record">
            <div v-if="status == 0">
              <a-input-number
                v-if="![1, 2, 3, 5, 6, 7, 8, 9].includes(record.typeId)"
                style="width:100px"
                v-model="record.thisPeriodValue"
              ></a-input-number>
              <div v-else>{{ record.thisPeriodValue }}</div>
            </div>
            <div v-else>{{ record.thisPeriodValue }}</div>
          </template>
        </a-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Target',
  props: ['report', 'type', 'status'],
  data() {
    return {
      listColumns: [
        { title: '项目', align: 'left', dataIndex: 'typeName', key: 'typeName' },
        { title: '初始值', align: 'left', dataIndex: 'startValue', key: 'startValue' },
        {
          title: this.type == 1 ? '上周' : '上月',
          align: 'left',
          dataIndex: 'lastPeriodValue',
          key: 'lastPeriodValue'
        },
        {
          title: this.type == 1 ? '本周' : '本月',
          align: 'left',
          dataIndex: 'thisPeriodValue',
          key: 'thisPeriodValue',
          scopedSlots: { customRender: 'thisPeriodValue' }
        },
        {
          title: '趋势',
          align: 'left',
          dataIndex: 'trendValue',
          key: 'trendValue',
          scopedSlots: { customRender: 'trendValue' }
        },
        { title: '控制目标值', align: 'left', dataIndex: 'controllerValue', key: 'controllerValue' },
        { title: '参考值', align: 'left', dataIndex: 'referenceValue', key: 'referenceValue' }
      ],
      ipagination: {}
    }
  },
  created() {}
}
</script>

<style lang="less" scoped>
// .ant-descriptions-title.small {
//   background-color: #fff;
//   padding: 10px;
//   text-align: center;
//   color: #000;
//   border-left: 1px solid #e8e8e8;
//   border-right: 1px solid #e8e8e8;
// }
@media print {
  .container {
    page-break-after: always;
  }
}
.container {
  padding: 50px 24px 0 24px;
}
.card_title {
  display: flex;
  align-items: center;
  img {
    width: 25px;
    height: 25px;
    margin-right: 10px;
  }
  span {
    font-size: 20px;
    font-weight: bold;
    color: #000;
  }
}
.card_nd_title {
  margin-top: 50px;
  span {
    font-size: 16px;
    // padding-left: 10px;
    font-weight: bold;
    color: #000;
  }
}
.line {
  height: 6px;
  border-radius: 6px;
  // margin-left: 10px;
  background-color: #00b5d4;
  opacity: 0.3;
}
.card_content {
  margin-top: 30px;
}
</style>

